<script setup>
import { Message } from "@arco-design/web-vue";
import { IconEdit, IconPlus } from "@arco-design/web-vue/es/icon";
import axios from "axios";
const baseUrl = import.meta.env.VITE_API_BASE_URL;

let props = defineProps({
  action: "",
  name: "file",
  uploadData: {},
  draggable: false,
  showFileList: false,
  accept: ""
});

let url = defineModel('url');

console.log(url);

const onSuccess = (res) => {
  url.value = res.response.data;
  Message.success("上传成功");
};


const customRequest = (option) => {
  const { onProgress, onError, onSuccess, fileItem, name } = option;
  const formData = new FormData();
  formData.append(name || 'file', fileItem.file);
  if (props.uploadData) {
    console.log(props.uploadData);
    Object.keys(props.uploadData).forEach(key => {
      formData.append(key, props.uploadData[key]);
    });
  }
  let actionUrl = baseUrl + props.action;
  axios.post(actionUrl, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    if (res.data.code != 200) {
      onError(res.data.msg);
    } else {
      onSuccess(res);
    }
  }).catch(err => {
    onError(err);
  })
}

</script>

<template>
  <a-space direction="vertical" :style="{ width: '100%' }">
    <a-upload :action="baseUrl + action" :data="uploadData" :show-file-list="false" @success="onSuccess">
      <template #upload-button>
        <div class="arco-upload-list-item">
          <div class="arco-upload-list-picture custom-upload-avatar" v-if="url">
            <img :src="url" />
            <div class="arco-upload-list-picture-mask">
              <IconEdit />
            </div>
          </div>
          <div class="arco-upload-picture-card" v-else>
            <div class="arco-upload-picture-card-text">
              <IconPlus />
              <div style="margin-top: 10px; font-weight: 600">上传头像</div>
            </div>
          </div>
        </div>
      </template>
    </a-upload>
  </a-space>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
